<template>
  <n-modal
      :title="'个人设置'"
      :mask-closable="false"
      preset="card" style="width: 500px;height: 600px"
      v-model:show="show"
  >
    <n-form ref="formRef" :model="personForm"
            label-placement="left"
            label-width="auto"
    >

      <n-form-item-row

          path="avatar"
      >
        <n-avatar
            style="margin: 0 auto"
            :size="100"
            :src="userInfo.avatar"
        />
      </n-form-item-row>
      <n-form-item
          label="昵称："
          path="name"
      >
        <n-input v-model:value="personForm.name" :default-value="userInfo.name" placeholder="输入姓名" />
      </n-form-item>
      <n-form-item
          label="个性签名："
          path="signature"
      >
        <n-input v-model:value="personForm.signature" :default-value="userInfo.signature" placeholder="个性签名" />
      </n-form-item>
      <n-form-item label="年龄：" path="age">
        <n-input v-model:value="personForm.age" :default-value="userInfo.age" placeholder="输入年龄" />
      </n-form-item>
      <n-form-item label="性别：" path="sex">
        <n-radio-group v-model:value="personForm.sex" name="sex">
          <n-radio :value="2">
            女
          </n-radio>
          <n-radio :value="1">
            男
          </n-radio>
        </n-radio-group>
      </n-form-item>
    </n-form>
    <template #action>
      <n-button type="primary" @click="updateSave">保存</n-button>
    </template>
  </n-modal>
</template>
<script setup>

import {storeToRefs} from "pinia";
import useUserStore from "@/stores/admin/useUserStore";
import {updateUser} from "@/api/system/userApi";

const {userInfo} = storeToRefs(useUserStore());
const show = ref(false)
const personForm = ref({
  id:userInfo.value.id,
  name:userInfo.value.name,
  age:userInfo.value.age,
  signature:userInfo.value.signature,
  sex:userInfo.value.sex,
})
defineExpose({
  open:()=>show.value = true
})
function updateSave(){
  updateUser(personForm.value).then(res=>{
    show.value = false
    naive.message.info('保存成功')
    userInfo.value = {
      ...userInfo.value,
      ...personForm.value
    }
  })
}
</script>